{extend name="base" /}
{block name="title"}{$info['title']}|程序员的收藏夹-专注于程序员学习、分享{/block}
{block name="style"}
<style type="text/css">
	#msgList{
		width: 100%;	
	}
</style>
{/block}

{block name="header"}
	{include file="public/user_header" /}
{/block}

{block name="content"}
<div class="zbd-content">

	<div class="page pt20">
		<div class="row atc-wai">
			<div class="atc-left-fixd">
				<span class="act-li icon ice-heart-off bold cursor-pointer purple" id="JS-like"></span>
				<span class="act-li mb15 purple" id="like">{$info['like_count']|default='0'}</span>
				<span class="act-li icon ice-collect-off bold cursor-pointer red" id="JS-collect"></span>
				<span class="act-li mb15" id="collect">{$info['collect_count']|default='0'}</span>
				<span class="act-li icon ice-view bold cursor-pointer green"></span>
				<span class="act-li mb15">{$info['browse']}</span>
				<span class="act-li icon ice-message bold cursor-pointer blue" data-scroll="#scroll-msg"></span>
				<span class="act-li evaluate_count">{$info['evaluate_count']|default='0'}</span>
			</div>
			<div class="w9 baise">
				<div class="breadcrumb breadcrumb-zbd">
				    <a href="/" class="icon ice-home"> 首页</a>
				    <a href="/project/spdetail?id={$info['type_id']}" class="icon ice-page-list"> {$info['type']['title']}</a>
				    {$info['title']}
				    <a href="javascript:history.go(-1);" class="back">返回上一步</a>
				</div>

				<div class="h2 bold mb30">{$info['title']}</div>
				
				<div class="a-user-info">
					<img class="align-middle u-pic-avatar-a yy" src="{$info['user']['avatar']}">
					<span class="">{$info['user']['nickname']}</span>
					<span class="riqide">{$info['create_time']}</span>
				</div>

				<div class="article-detail">
					<p class="icon ice-quote fonzd blue bold"></p>
					<div class="miaoshu">{$info['remark']}</div>
				</div>

				<div class="fenlei">
					<span class="tag tag-radius bg-green"> {$info['type']['title']}</span>

					<span class="tag tag-radius bg-blue JS-tiaoz cursor-pointer" data-link="{$info['link']}" > <span class="icon ice-link"></span> 打开项目链接</span>
				</div>

				<div class="content mt30" id="content">
					{$info['content']|raw|htmlspecialchars_decode}
				</div>

				<div class="msglist mt40" id="scroll-msg">
					<div class="box-title icon ice-message mb40">
						<div class="left">留言讨论（<span class="small msg-total blue evaluate_count">{$info['evaluate_count']|default='0'}</span>）<span class='red icon ice-certified small-1'> 请文明发布观点，营造良好环境</span></div>
					</div>

					<div class="row">
						{if condition="$userInfo"}
					    <div class="group-input w12">
					        <div class="group-label-1">
					        	<img class="avatar30" src="{$userInfo['avatar']|default='http://pic.zhengbingdong.cn/upload/20220327/4e7b348516ddb23dc43cd4e7bb2c916d.png'}"/>
					        </div>
					        <input type="text" class="msg-inp" id="msg" placeholder="请输入您的观点">
					        <div class="group-label btn bg-blue JS-msg">评论</div>
					    </div>
					    {else /}
					    <div class="no_login">
					    	<p class="no_login_p"><a href="javascript:;" onclick="ShowLogin(this)">登录</a> 后可参与评论</p>
					    </div>
					    {/if}
					</div>

					<div class="row">
						<div id="msgList">
						    
					    </div>

					    <!-- <div class="w12 pingl">
					    	<div class="pingl-img left">
					    		<img class="avatar30-1" src="{$userInfo['avatar']|default='http://pic.zhengbingdong.cn/upload/20220327/4e7b348516ddb23dc43cd4e7bb2c916d.png'}"/>
					    	</div>
					    	<div class="pingl-com left">
					    		<div class="pingl-com-user">
					    			<a href="javascript:;" class="pingl-com-user-info blue">郑炳东</a> <spa class="addtime">2022-03-27 16:27:88</span> <span class="blue huifu">回复</span>
					    		</div>
					    		<div class="comment-content-detail clear">感谢大佬佬</div>

					    		<div class="msg-dub">
					    			<div><a href="javascript:;" class="blue">隔壁老郑</a> 回复 <a href="javascript:;" class="blue">正冰冻</a> <spa class="addtime">2022-03-27 16:27:88</span></div>
					    			<div class="comment-content-detail">回复的内容</div>
					    		</div>
					    	</div>
					    </div> -->

					    <div class="no_login pinglin-empyt">
					    	<p class="no_login_p icon ice-empty"> 暂无评论内容</p>
					    </div>

						<div class="jiaz cursor-pointer JS-next"><span id="loadtext">加载更多评论</span><span class="icon ice-arrow-triangle-b"></span></div>
					</div>
				</div>

			</div>
			<div class="w3">
				<div class="box" data-scroll-class="finxzhuanti" data-scroll-top="100" data-scroll-delay="1" data-scroll-type="auto">
					<div class="box-title icon ice-page-list">
						<div class="left">所属专题介绍</div>
					</div>
					<div class="box-content">
						<ul class="list bt11">
							<li class="list-item">
								<div class="type-pic-li">
									<img class="type-pic" src="{$typeInfo['pic_big']}">
									<p class="type_tj">共{$typeInfo['source_count']}个开源项目</p>
								</div>
								<span class="list-icon"><img class='type-icon align-middle' src="{$typeInfo['pic']}"></span>
								<span class="list-title"><a href="/project/spdetail?id={$info['type_id']}" class="black small bold">{$typeInfo['title']}</a></span>
								<p class="miaoshus mt15">{$typeInfo['remark']}</p>
							</li>
						</ul>
						<p class="h5 icon ice-product"> {$typeInfo['title']}最新收录</p>
						{foreach $typeInfo['source'] as $key => $val}
						<p class="mt15 el pdsr"><a class="tass" href="/project/article?id={$val['id']}"><span class="tag tag-radius bg-red">{$key+1}</span>{$val['title']}</a></p>
						{/foreach}
					</div>

					<div class="box-content">
						
					</div>
				</div>
			</div>
		</div>
	</div>
	<input type="hidden" id="project_id" value="{$info['id']}">
	<input type="hidden" id="page" value="1">
</div>
<script type="text/javascript">
	ice(function(){

		// 加载玩请求评论
		getList({
			project_id : ice("#project_id").val(),
			page : ice("#page").val(),
		}, 'html');

		ice(".JS-tiaoz").click(function(e) {
			var link = ice(this).attr("data-link")
			var text = '即将跳转外部链接：'+link
			ui.del(link, text)
		})

		// 收藏
		ice("#JS-collect").click(function(e){
			// 当前的收藏数量
			var collect = ice("#collect").html();
			console.log(collect, 'collect')
			ice.ajax({
			    url:'/AjaxSyn/projectCollection',
			    type:'get',
			    data:{
			    	project_id : ice("#project_id").val(),
			    },
			    success:function(res){
			        if(res.code == 1){
			        	if(res.message=='请先登录'){
			        		ShowLogin();
			        		return false;
			        	}
			            ice.pop({content:res.message,icon:'fail'})
			            return false;
			        }else{

			        	ice.pop({content:res.data.text,icon:'success'})
			        	if(res.data.type =='inc'){
			        		ice("#collect").html(parseInt(collect)+1)
			        	} else{
			        		ice("#collect").html(parseInt(collect)-1)
			        	}
			        }
			    }
			});
		})

		// 点赞喜欢
		ice("#JS-like").click(function(e){
			// 当前的收藏数量
			var like = ice("#like").html();
			ice.ajax({
			    url:'/AjaxSyn/projectLike',
			    type:'get',
			    data:{
			    	project_id : ice("#project_id").val(),
			    },
			    success:function(res){
			        if(res.code == 1){
			        	if(res.message=='请先登录'){
			        		ShowLogin();
			        		return false;
			        	}
			            ice.pop({content:res.message,icon:'fail'})
			            return false;
			        }else{

			        	ice.pop({content:res.data.text,icon:'success'})
			        	if(res.data.type =='inc'){
			        		ice("#like").html(parseInt(like)+1)
			        	} else{
			        		ice("#like").html(parseInt(like)-1)
			        	}
			        }
			    }
			});
		})

		// 评论
		ice(".JS-msg").click(function(e){
			var msg = ice("#msg").val()
			if(msg == ''){
				ice.pop({content:'请输入评论内容'})
				return false;
			}

			ice.ajax({
			    url:'/AjaxSyn/projectComment',
			    type:'post',
			    data:{
			    	project_id : ice("#project_id").val(),
			    	msg : ice("#msg").val(),
			    	parent_id : 0
			    },
			    success:function(res){
			        if(res.code == 1){
			            ice.pop({content:res.message,icon:'fail'})
			            return false;
			        }else{

			        	ice.pop({content:res.message,icon:'success'})
			        	ice("#msg").val('')
			        	ice("#page").val(1)
			        	ice(".pinglin-empyt").hide();
			        	ice(".JS-next").show();
			        	ice(".evaluate_count").html(parseInt(ice(".evaluate_count").html())+1)
			        	getList({
							project_id : ice("#project_id").val(),
							page : ice("#page").val(),
						}, 'html');
			        }
			    }
			});
		})

		// 点击下一页
		ice(".JS-next").click(function(e) {
			ice("#loadtext").html('正在努力加载中...')
			getList({
				project_id : ice("#project_id").val(),
				page : ice("#page").val(),
			}, 'append');
		})

		// 请求接口
		function getList(maps, type='append'){
			ice.ajax({
			    url:'/Comment/projectCommentList',
			    type:'post',
			    data: maps,
			    success:function(res){
			    	ice("#loadtext").html('加载更多评论')
			        if(res.code == 1){
			            ice.pop({content:res.message,icon:'fail'})
			            return false;
			        }else{

			        	var content = '';
				    	var data = res.data

				    	for (var i = 0; i < data.length; i++) {
				    		content += '<div class="w12 pingl">'
						    	content += '<div class="pingl-img left">'
						    		content += '<img class="avatar30-1" src="'+data[i]['user']['avatar']+'"/>'
						    	content += '</div>'
						    	content += '<div class="pingl-com left">'
						    		content += '<div class="pingl-com-user">'
						    			content += '<a href="javascript:;" class="pingl-com-user-info blue">'+data[i]['user']['nickname']+'</a> <spa class="addtime">'+data[i]['create_time']+'</span> <span class="blue huifu"></span>'
						    		content += '</div>'
						    		content += '<div class="comment-content-detail clear">'+data[i]['msg']+'</div>'

						    		if(data[i]['somCommentList']){
						    			for (var j = 0; j < data[i]['somCommentList'].length; j++) {
						    				content += '<div class="msg-dub">'
								    			content += '<div><a href="javascript:;" class="blue">'+data[i]['somCommentList'][j]['user']['nickname']+'</a> 回复 <a href="javascript:;" class="blue">'+data[i]['user']['nickname']+'</a> <spa class="addtime">'+data[i]['somCommentList'][j]['create_time']+'</span></div>'
								    			content += '<div class="comment-content-detail">'+data[i]['somCommentList'][j]['msg']+'</div>'
								    		content += '</div>'
						    			}
						    		}
						    	content += '</div>'
						   content += ' </div>'
				    	}

				    	if(type == 'append'){

				    		if(res.data.length == 0){
					    		ice.pop({content:'数据全部加载完'})
					    		ice(".JS-next").hide();
					    		return false;
					    	}

				    		ice("#msgList").append(content)

				    	} else{

				    		if(res.data.length == 0){
					    		ice(".pinglin-empyt").show();
					    		ice(".JS-next").hide();
					    		return false;
					    	}

				    		ice("#msgList").html(content)
				    	}
			    		
			    		ice("#page").val(parseInt(maps.page) + 1)
			        	ice("#msg").val('')
			        }
			    }
			});
		}

		ice(".huifu").click(function(e){
			ice.pop({content:'未开放回复评论'})
		})
	})
</script>
{/block}